<template>
  <div class="all">
    <div class="title">
      <div>{{ title }}</div>
      <div>
        <el-button type="primary" icon="el-icon-back" @click="goBack">返回</el-button>
        <el-button v-if="roles.includes('StockPartsDelete')" type="danger" icon="el-icon-delete" @click="delBtn">{{ $t('button.delete') }}</el-button>
        <el-button v-if="roles.includes('StockPartsUpdate')" type="primary" icon="el-icon-document-checked" @click="submitForm('form')">保存</el-button>
      </div>
    </div>
    <div class="detail-mid">
      <el-form v-loading="loading" ref="form" :model="data" inline :rules="rules">
        <el-row>
          <el-col :span="4">
            <el-form-item label="编号" prop="coding">
              <el-input v-model="data.coding" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="备件名称" prop="name">
              <el-input v-model="data.name" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('app.stock.parts.brand')">
              <el-input v-model="data.brand" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="规格型号" prop="spec">
              <el-input v-model="data.spec" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('app.stock.parts.cost')" prop="cost_id">
              <v-select v-model="data.cost_id" action="costList" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('app.stock.parts.unit')" prop="unit">
              <el-input v-model="data.unit" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="本月结存" prop="number">
              <el-input v-model="data.number" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="低储">
              <el-input v-model="data.min_number" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="高储">
              <el-input v-model="data.max_number" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="部门" prop="department_id">
              <v-select v-model="data.department_id" action="factoryList" :query="{ category: 2 }" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('app.stock.parts.admin')">
              <v-select v-model="data.admin_id" action="adminList" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('app.stock.parts.price')">
              <el-input v-model="data.price" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="备件类别" prop="category_id">
              <v-select v-model="data.category_id" action="partsCategoryList" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="供应商">
              <v-select v-model="data.provider_id" action="providerList" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('app.stock.parts.store')" prop="store_id">
              <v-select v-model="data.store_id" action="storeList" :query="{ kind: 1 }" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="备注">
              <el-input v-model="data.store_location" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('app.status')" prop="status">
              <SelfSelect v-model="data.status" :show-list="status" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('app.sort')" prop="sort">
              <el-input v-model="data.sort" clearable />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div v-if="!editId" class="detail-bottom">
      <el-tabs>
        <el-tab-pane :label="$t('app.description')">
          <div style="width: 100%;padding: 2px">
            <TinyMce id="edit" v-model="data.content" :height="250" />
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div v-if="editId" class="detail-bottom">
      <el-tabs>
        <el-tab-pane :label="$t('app.description')">
          <el-row v-if="editId" :gutter="20" style="padding: 2px">
            <el-col :span="4">
              <div>
                <p>{{ $t('app.createTime') }}</p>
                <el-input v-model="data.create_time" readonly />
              </div>
              <div>
                <p>{{ $t('app.createAdmin') }}</p>
                <el-input v-model="data.create_admin" readonly />
              </div>
              <div v-if="data.update_time">
                <p>{{ $t('app.updateTime') }}</p>
                <el-input v-model="data.update_time" readonly />
                <p>{{ $t('app.updateAdmin') }}</p>
                <el-input v-model="data.update_admin" readonly />
              </div>
            </el-col>
            <el-col :span="16">
              <TinyMce v-model="data.content" />
            </el-col>
            <el-col class="upload" :span="4">
              <Adjunct :pk="editId" table="parts" />
            </el-col>
          </el-row>
          <el-row v-if="!editId" :gutter="20" style="padding: 2px">
            <el-col :span="24">
              <TinyMce v-model="data.content" />
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane :label="$t('app.stock.parts.equipmentList.name')">
          <div class="detail-table">
            <el-table ref="multipleTable" tooltip-effect="dark" width="100%" :data="data.used_equipment">
              <el-table-column prop="equipment" :label="$t('app.stock.parts.equipmentList.equipmentName')" align="left" />
              <el-table-column prop="equipment_manufacturer" :label="$t('app.stock.parts.equipmentList.equipmentCoding')" align="left" min-width="52%" />
              <el-table-column v-if="roles.includes('StockPartsUpdate')" :label="$t('app.handle')" align="center">
                <template scope="{row}">
                  <el-button class="delBtn" type="text" @click="eqDel(row.id)">{{ $t('button.delete') }}</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-form v-if="roles.includes('StockPartsUpdate')" ref="providerFrom" :model="data" inline hide-required-asterisk>
              <el-row :gutter="20" style="margin: 20px 0 20px">
                <el-col :span="9">
                  <el-form-item>
                    <VSelect v-model="eq.equipment_id" action="equipmentList" :query="{ add_field: 'coding' }" />
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item>
                    <VSelect v-model="eq.provider_id" action="providerList" disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="2">
                  <el-button icon="el-icon-upload2" @click="eqSubmit(1)" />
                </el-col>
              </el-row>
            </el-form>
          </div>
        </el-tab-pane>
        <el-tab-pane label="适用于工装">
          <div class="detail-table">
            <el-table ref="multipleTable" tooltip-effect="dark" width="100%" :data="data.used_jig">
              <el-table-column prop="equipment" :label="$t('app.stock.parts.equipmentList.equipmentName')" align="left" />
              <el-table-column prop="equipment_manufacturer" :label="$t('app.stock.parts.equipmentList.equipmentCoding')" align="left" min-width="52%" />
              <el-table-column v-if="roles.includes('StockPartsUpdate')" :label="$t('app.handle')" align="center">
                <template scope="{row}">
                  <el-button class="delBtn" type="text" @click="eqDel(row.id)">{{ $t('button.delete') }}</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-form v-if="roles.includes('StockPartsUpdate')" ref="providerFrom" :model="data" inline hide-required-asterisk>
              <el-row :gutter="20" style="margin: 20px 0 20px">
                <el-col :span="9">
                  <el-form-item>
                    <VSelect v-model="eq.equipment_id" action="equipmentList" :query="{ add_field: 'coding' , type: 2 }" />
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item>
                    <VSelect v-model="eq.provider_id" action="providerList" disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="2">
                  <el-button icon="el-icon-upload2" @click="eqSubmit(2)" />
                </el-col>
              </el-row>
            </el-form>
          </div>
        </el-tab-pane>
        <el-tab-pane label="适用于设施">
          <div class="detail-table">
            <el-table ref="multipleTable" tooltip-effect="dark" width="100%" :data="data.used_facility">
              <el-table-column prop="equipment" :label="$t('app.stock.parts.equipmentList.equipmentName')" align="left" />
              <el-table-column prop="equipment_manufacturer" :label="$t('app.stock.parts.equipmentList.equipmentCoding')" align="left" min-width="52%" />
              <el-table-column v-if="roles.includes('StockPartsUpdate')" :label="$t('app.handle')" align="center">
                <template scope="{row}">
                  <el-button class="delBtn" type="text" @click="eqDel(row.id)">{{ $t('button.delete') }}</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-form v-if="roles.includes('StockPartsUpdate')" ref="providerFrom" :model="data" inline hide-required-asterisk>
              <el-row :gutter="20" style="margin: 20px 0 20px">
                <el-col :span="9">
                  <el-form-item>
                    <VSelect v-model="eq.equipment_id" action="equipmentList" :query="{ add_field: 'coding' , type: 3 }" />
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item>
                    <VSelect v-model="eq.provider_id" action="providerList" disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="2">
                  <el-button icon="el-icon-upload2" @click="eqSubmit(3)" />
                </el-col>
              </el-row>
            </el-form>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="$t('app.stock.parts.equipmentCategory.name')">
          <div class="detail-table">
            <el-table ref="multipleTable" tooltip-effect="dark" width="100%" :data="data.used_equipment_category">
              <el-table-column prop="first_category" :label="$t('app.stock.parts.equipmentCategory.firstCategory')" align="left" />
              <el-table-column prop="category" :label="$t('app.stock.parts.equipmentCategory.category')" align="left" min-width="52%" />
              <el-table-column v-if="roles.includes('StockPartsUpdate')" :label="$t('app.handle')" align="center">
                <template scope="{row}">
                  <el-button class="delBtn" type="text" @click="eqCategoryDel(row.id)">{{ $t('button.delete') }}</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-form v-if="roles.includes('StockPartsUpdate')" ref="eqCategoryFrom" style="margin-top: 16px" :model="a" inline>
              <el-row>
                <el-col :span="9">
                  <el-form-item>
                    <VSelect v-model="a.first_category_id" action="equipmentCategoryList" :query="{ level: 1 }" />
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item>
                    <SelectS v-model="a.category_id" action="equipmentCategoryList" :query="{ parent_id: a.first_category_id }" :disabled="!a.first_category_id" />
                  </el-form-item>
                </el-col>
                <el-col :span="2">
                  <el-button icon="el-icon-upload2" @click="eqCategorySubmit" />
                </el-col>
              </el-row>
            </el-form>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="$t('app.stock.parts.transaction.name')">
          <div class="detail-table">
            <p class="fontStyle">{{ $t('app.stock.parts.transaction.warehousing.name') }}</p>
            <el-table ref="multipleTable" tooltip-effect="dark" width="100%" :data="data.enter_list">
              <el-table-column :label="$t('app.stock.parts.transaction.warehousing.order')" align="left">
                <template scope="{ row }">
                  <div>{{ row.order_name }}</div>
                </template>
              </el-table-column>
              <el-table-column prop="verify_admin" :label="$t('app.stock.parts.transaction.warehousing.verify')" align="left" />
              <el-table-column prop="number" :label="$t('app.stock.parts.transaction.warehousing.number')" align="left" />
              <el-table-column prop="price" :label="$t('app.stock.parts.transaction.warehousing.price')" align="left" />
              <el-table-column :label="$t('app.stock.parts.transaction.warehousing.total')" align="left">
                <template scope="{ row }">
                  <div>{{ row.number * row.price }}</div>
                </template>
              </el-table-column>
              <el-table-column prop="verify_time" :label="$t('app.stock.parts.transaction.warehousing.date')" align="left" />
            </el-table>
            <p class="fontStyle">{{ $t('app.stock.parts.transaction.appear.name') }}</p>
            <el-table ref="multipleTable" tooltip-effect="dark" width="100%" :data="data.appear_list">
              <el-table-column prop="order" align="left" :label="$t('app.stock.parts.transaction.appear.order')" />
              <el-table-column prop="verify_admin" :label="$t('app.stock.parts.transaction.appear.verify')" align="left" />
              <el-table-column prop="verify_time" :label="$t('app.stock.parts.transaction.appear.date')" align="left" />
              <el-table-column prop="apply_admin" :label="$t('app.stock.parts.transaction.appear.apply')" align="left" />
              <el-table-column prop="workorder" :label="$t('app.stock.parts.transaction.appear.workorder')" align="left">
                <template scope="{ row }">
                  <div>{{ row.order_name }}</div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import API from '@/api/stock/parts'
import SelfSelect from '@/components/select-o'
import VSelect from '@/components/select-search'
import SelectS from '@/components/s-select'
import Adjunct from '@/components/Upload/adjunct'
import TinyMce from '@/components/Tinymce/index'
import { mapGetters } from 'vuex'
import { status, department } from '@/utils/option'
export default {
  inject: ['goUrl', 'isEdit', 'add', 'update', 'reload'],
  components: {
    SelfSelect,
    SelectS,
    VSelect,
    Adjunct,
    TinyMce
  },
  data() {
    return {
      data: {
        sort: 100,
        status: 1
      },
      equipment_id: null,
      ramark: null,
      editId: null,
      parentId: null,
      eq: {
        provider_id: null,
        equipment_id: null
      },
      used_equipment_category: {},
      a: {},
      title: '',
      provider_id: null,
      department,
      status,
      loading: true,
      rules: {
        coding: { required: true, message: '请输入编号', trigger: 'change' },
        name: { required: true, message: '请输入备件名称', trigger: 'change' },
        spec: { required: true, message: '请输入规格型号', trigger: 'change' },
        cost_id: { required: true, message: '请选择成本中心', trigger: 'change' },
        status: { required: true, message: '请选择状态', trigger: 'change' },
        unit: { required: true, message: '请输入单位', trigger: 'change' },
        number: { required: true, message: '请输入本月结存', trigger: 'change' },
        department_id: { required: true, message: '请选择部门', trigger: 'change' },
        category_id: { required: true, message: '请选择备件类别', trigger: 'change' },
        store_id: { required: true, message: '请选择仓库', trigger: 'change' },
        sort: { required: true, message: '请输入排序', trigger: 'change' }
      }
    }
  },
  created() {
    const edit = this.isEdit()
    if (edit) {
      this.title = this.$t('route.stock.spares.edit')
      this.editId = edit
      this.info()
    } else {
      this.loading = false
      this.loading = false
      this.title = this.$t('route.stock.spares.create')
    }
  },
  computed: {
    ...mapGetters(['roles'])
  },
  methods: {
    goBack() {
      this.$router.push('/stock/parts')
    },
    info() {
      API.getOne(this.editId).then(res => {
        this.data = res.data
        this.loading = false
      }).finally(() => {
        this.loading = false
      })
    },
    delBtn() {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const id = this.editId
        API.delete(id).then(res => {
          if (res.data.error_code !== 1) {
            this.$message.error(res.data.message)
          } else {
            this.$message.success('删除成功')
            this.goBack()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    submitForm() {
      if (this.editId) {
        this.update(API, this.data, this.$refs['form'], '/stock/parts')
      } else {
        this.add(API, this.data, this.$refs['form'], '/parts/edit/')
      }
    },
    providerSubmit() {
      const query = {
        provider_id: this.provider_id,
        parts_id: this.editId
      }
      API.providerAppend(query).then(res => {
        if (res.data.error_code === 1) {
          this.$message.success('新增成功')
          this.info()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    providerDel(id) {
      API.providerRemove(id).then(res => {
        if (res.data.error_code !== 1) {
          this.$message.error(res.data.message)
        } else {
          this.$message.success('删除成功')
        }
      }).finally(() => {
        this.info()
      })
    },
    eqCategorySubmit() {
      const query = {
        first_category_id: this.a.first_category_id,
        category_id: this.a.category_id,
        parts_id: this.editId
      }
      API.eqCategoryAppend(query).then(res => {
        if (res.data.error_code === 1) {
          this.$message.success('新增成功')
          this.info()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    eqCategoryDel(id) {
      console.log(id)
      API.eqCategoryRemove(id).then(res => {
        if (res.data.error_code !== 1) {
          this.$message.error(res.data.message)
        } else {
          this.$message.success('删除成功')
        }
      }).finally(() => {
        this.info()
      })
    },
    eqSubmit(type) {
      const query = {
        equipment_id: this.eq.equipment_id,
        parts_id: this.editId,
        type
      }
      API.eqAppend(query).then(res => {
        if (res.data.error_code === 1) {
          this.$message.success('新增成功')
          this.info()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    eqDel(id) {
      API.eqRemove(id).then(res => {
        if (res.data.error_code !== 1) {
          this.$message.error(res.data.message)
        } else {
          this.$message.success('删除成功')
        }
      }).finally(() => {
        this.info()
      })
    },
    categoryChange(e) {
      // this.parentId = this.a.first_category_id
      // console.log(this.parentId)
      // this.$set(this.$data, this.parent_id, this.a.first_category_id)
    }
  }
}
</script>

<style scoped>
.fontStyle{
  color: #1890ff;
  font-size: 14px;
}

</style>
